<template>
	<view>
		<!-- <button @click="chooseImage">选择照片</button> -->
		<!-- 增加水印 -->
		<!-- <hpy-watermark ref="watermark" @waterMark="waterMark"></hpy-watermark>
		<view class="img-out">
			<view class="img-list" v-for="(item, index) in imageList" :key="index">
				<image :src="item"  @click="imgPreview(index)" class="img_st"></image>
			</view>
			<view class="img-list img-list-add" @click="chooseImage" v-if="img_list_type">
				<i class="iconfont icon-shumajiadian" ></i>
			</view>
		</view> 
		<br>
		<view @click="upload">
			提交
		</view>
		{{let_run}} -->
		<div class="null_title">
			<div>
				<i class="iconfont icon-empty iconcize"></i>
			</div>
			<div class="null_title_tow">
				没有更多数据
			</div>
		</div>
	</view>
</template>

<script>
	
import {getuplodFile} from '@/common/api/job/commit.js'	
	export default {
		data() {
			return {
				imageList:[],
				img_list_type: true,
				let_run: ''
			}
		},
		methods: {
			
			upload(){
				let _this = this;
				 let token = {'Access-Token':uni.getStorageSync('token')}
				console.log(this.imageList)
				uni.uploadFile({
				 url : 'http://192.168.1.2:8000/uploadFile',
				 filePath: _this.imageList[0],
				 name: 'file', 
				 formData: {
				  'user': 'test'
				 },
				 header: token,
				 success: function (uploadFileRes) {
					console.log(uploadFileRes.data);
				 }
				});
			},
			
			
			// 选择图片
			chooseImage() {
				
				
				
				
				uni.chooseImage({
					count: this.limit,				// 限制的图片数量
					sizeType: ['original', 'compressed'],		// original 原图，compressed 压缩图，默认二者都有 
					sourceType: ['album', 'camera'],// album 从相册选图，camera 使用相机，默认二者都有
					success: (res) => {
						var imgPathList = res.tempFilePaths;
						if(imgPathList.length > 0){
							this.addImages(imgPathList);
						}
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
						if("chooseImage:fail cancel" == err.errMsg){
							uni.showToast({
								icon:'none',
								title:'取消了选择'
							}); 
						}else{
							// #ifdef MP
							uni.getSetting({
								success: (res) => {
									let authStatus = res.authSetting['scope.album'];
									if (!authStatus) {
										uni.showModal({
											title: '授权失败',
											content: '系统上传需要从您的相册获取图片，请在设置界面打开相关权限',
											success: (res) => {
												if (res.confirm) {
													uni.openSetting();
												}
											}
										})
									}
								}
							})
							// #endif
						}
					}
				});
				

			},
			// 添加图片
			addImages(filePaths){
				if(filePaths.length > 0){
					var fillTexts = ["业务员：张三", "当前位置：广东省珠海市香洲区XXX",'四班科技'];
					fillTexts.push("时间：" + this.getNowTime());
					// 添加水印
					this.$refs.watermark.addWaterMark({
						filePaths,
						fillTexts
					});
				}
			},
			// 放大预览
			imgPreview(index) {
				console.log('imgPreview', index)
				uni.previewImage({
					urls: this.imageList,
					current: index,
					loop: true,
				});
			},
			
			/**
			 * 水印添加回调，在H5平台下，filePath 为 base64
			 */
			waterMark(filePath){
				
				this.imageList.push(filePath);
				// this.upload(filePath)
				console.log(this.imageList)
				if(this.imageList.length > 2){
					this.img_list_type = false;
				}
				
			},
			/**
			 * 获取当前时间
			 */
			getNowTime(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				return (year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
			},
			
		}
	}
</script>

<style scoped lang="scss">
.img-list{
	background: #fff;
	height: 80px;
	width: 80px;
	margin: 0 0 0 8%;
	border-radius: 4px;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
	overflow: hidden;

}

.img_st {
	height: 80px;
	width: 80px;
	line-height: 80px;
	border: 1px solid red;
}

.img-out {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid red;
	width: 95%;
	margin: auto;
	height: 80px;
}

.img-list-add {
	text-align: center;
	height: 80px;
	width: 80px;
	line-height: 80px;
	i {
		font-size: 40px;
		color: #0098EF;
	}
}

</style>

